<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page session="false" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>category</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="<c:url value="/resources/css/backend.css" />" type="text/css">
<script type="text/javascript" src="<c:url value="/resources/javascript/jquery-1.6.1.js" />"></script>
<script type="text/javascript"><!--
$(document).ready(function(){
	$("#category-creation-form").submit(function(){
		  if (!$.trim($("#category-name").val()).length) {
			  alert("please input the category name!");
			  $("#category-name").focus();
			  return false;
			}
		  var form = $(this);
		  $.ajax({type: "POST", url: form.attr("action"), data: $("#category-name").val(), 
			  contentType: "application/json", dataType: "text",
			  success: function(catId) {
				  //alert(text);
				  $(".category-list").append("<li id=\"" + catId + "-li\">" + $("#category-name").val() + 
						  " <a class=\"category-delete-link\" id=\"" + catId + "\" href=\"#\">delete</a>"
							 + "</li");
				  $("#category-name").val('');
			  },
			  error: function(xhr) {alert("category creation fails!" + xhr.responseText);}
			});		  
		  return false;
	});

	$(".category-delete-link").live('click', function(){
		  var link = $(this);
		  //alert(link.attr('id'));
		  $.ajax({type: "DELETE", url: $("#category-creation-form").attr("action") + "/" +  link.attr('id'),
			  data: {}, contentType: "application/json", dataType: "text",
			  success: function(text) { 
				  //alert(text);
				  alert("Category " + link.attr('id') + " was deleted!");
				  var liId =  "#" + link.attr('id') + "-li";
				  $(liId).remove();
				}, 
			  error: function(xhr) { alert("category deletion fails!" + xhr.responseText); }
			});
	});

//	$('.category-delete-link').live('click', function() {
//		  alert("fuck");
//	});
});
</script>
</head>
<body>
<div class="wrapper">

  <div class="header">
    <h1>iBun Admin Console</h1>
  </div>  
  
	<div class="content">
	
    <div class="left-sider">
      <jsp:include page="../templates/adminMenu.jsp"></jsp:include>    
    </div>
	 
    <div class="main">
      <h3>Category List</h3>
      <div class="category-creation">
        <form id="category-creation-form" method="POST" action='<c:url value="/admin/categories"/>'>
          <p>
            <label>name: </label>
            <input type="text" id="category-name" name="category-name">
            <input type="submit" value="add"/>
          </p>
        </form>
      </div>
      
      <div class="categories">
        <ul class="category-list">
          <c:forEach items="${categories}" var="cat">
            <li id="${cat.id}-li">${cat.name} <a class="category-delete-link" id="${cat.id}" href="#">delete</a></li>
          </c:forEach>
        </ul>
      </div>
    </div>
  
    <div class="footer">
    </div>
    
  </div>
</div>
</body>
</html>
